<template>
	<div class="tags" style="width:150px">
		<!--    伪选择框-->
		<div class="tags-box" :class="[selectType == true?'tags-box-border-choose':(tagsForm.length>0?'tags-box-border':'')]">
			<span class="tags-box-title" v-if="tagsForm.length == 0">状态</span>
			<div class="tags-item" v-for="(item,index) in tagsForm" v-if="index<1">
				<i class="iconfont tags-item-icon" :class="item.icon" :style="{color:item.color}"></i>
				<span class="tags-item-title">{{ item.label }}</span>
			</div>
			<i class="tags-box-icon el-icon-arrow-down"
				:class="[selectType == false?'transformIconChoose':'transformIcon']"></i>
		</div>
		<el-select ref="tagsSelect" style="width: 100%;opacity:0;" v-model="selectTitle" @visible-change="visibleChange"
			size="medium" placeholder="请选择">
			<template slot="empty">
				  <el-radio  v-for="item in options" class="statusradio" v-model="radio" :label="item">
					<div>
				    <i class="iconfont task-popover-icon" :class="item.icon" :style="{color:item.color}"></i>{{item.label}}
					</div>

				  </el-radio>
			</template>
		</el-select>
	</div>
</template>
<script>
import utils from '@/utils/utils'
	export default {
		props: ['status'],
		data() {
			return {
				projstatus:null,
				radio:"",
				options: [
					{
	  		value: '00',
	  		label: '待确认',
	  		type: false,
	  		color: 'rgb(250, 145, 31)',
	  		icon: 'icon-shuangyuanquan-copy'
	  	},
	  	{
	  		value: '01',
	  		label: '进行中',
	  		type: false,
	  		color: 'rgb(69, 240, 210)',
	  		icon: 'icon-shuangyuan'
	  	},
	  	{
	  		value: '02',
	  		label: '已完成',
	  		type: false,
	  		color: 'rgb(70, 216, 171)',
	  		icon: 'icon-yiwancheng-copy'
	  	},
	  	{
	  		value: '03',
	  		label: '已终止',
	  		type: false,
	  		color: 'rgb(248, 120, 103)',
	  		icon: 'icon-yemian-1'
	  	},
	  	{
	  		value: '04',
	  		label: '已中止',
	  		type: false,
	  		color: 'rgb(255,165,0)',
	  		icon: 'icon-yemian-1'
	  	},
				],
				selectTitle: '',
				selectType: false,
				tagsForm: [],
				checkboxloading: false
			}
		},
		created () {
			this.projstatus=this.status
			this.selectstatus()
		},
		watch: {
			status(newval,oldval){
				if(!utils.isNull(newval)){
					this.projstatus=newval
					this.selectstatus()
				}else{
					this.tagsForm=[]
				}
			}
		},
		methods: {
			selectstatus(){
				this.options.forEach(data=>{
					if(data.value==this.projstatus){
						this.tagsForm=[]
						this.tagsForm.push(data)
					}
				})
			},
			clear(){
			   this.tagsForm=[],
			   this.radio=''
			   this.$emit('tagsFormchang','')
			   },
			visibleChange(item) {
				if(item==false){
					this.tagsForm=[]
					if(!utils.isNull(this.radio)){
						this.tagsForm.push(this.radio)
						this.$emit('tagsFormchang',this.tagsForm[0].value)
					}
				}

			},
		}
	}
</script>

<style scoped>
	.select {
		max-height: 380px;
		overflow: auto;
	}

	.select-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 10px 10px;
		cursor: pointer;
		color: #333333;
		justify-content: space-between;
	}

	.select-item:hover {
		background-color: rgba(88, 96, 105, 0.06);
	}

	.select-item-sign {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		margin-right: 5px;
	}


	.tags-item {
		padding: 3px 6px;
		background-color: #ecedf0;
		border-radius: 3px;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-right: 10px;
	}

	.tags-item-title {
		max-width: 66px;
		font-size: 12px;
		color: #606266;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-right: 5px;
		font-weight: 500;
	}


	.tags {
		display: flex;
		justify-content: center;
		align-items: center;
		/* background-color: #e47777; */
		border-radius: 4px;
		position: relative;
	}

	.tags-box {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		border-radius: 4px;
		pointer-events: none;
		/* background-color: #ffffff; */
		padding-left: 10px;
		padding-right: 30px;
		display: flex;
		/* flex-direction: row; */
		    justify-content: center;
		align-items: center;
		border:1px solid #F5F6F8
	}

	.tags-box-icon {
		color: rgb(51, 51, 51);
		font-size: 14px;
		transition: transform .3s;
		cursor: pointer;
		position: absolute;
		right: 10px;
		font-weight: 700;


	}

	.transformIcon {
		transform: rotateZ(-180deg);
	}

	.transformIconChoose {
		transform: rotateZ(0deg);
	}

	.tags-box-border {
		/* border:2px solid rgb(236, 237, 240); */
			border: 1px solid #1890ff;

	}

	.tags-box-border-choose {
		border: 1px solid #1890ff;
	}

	.tags-box-title {
				color: rgb(46, 64, 94);
		font-size: 14px;
		font-weight: 700px;

	}


	.task-popover-icon {
		font-size: 16px;
		margin-right: 5px;
	}

	.tags-item-icon {
		font-size: 12px;
		margin-right: 5px;
	}

	.rejected {
		color: rgb(236, 0, 25);
	}

	.completed {
		color: rgb(254, 188, 8);
	}

	.inProgress {
		color: rgb(74, 144, 226);
	}

	.toDo {
		color: rgb(254, 115, 0);
	}

	/deep/.el-input--medium .el-input__inner {
		background-color: #f5f6f8;
		border-color: #F5F6F8;
		font-weight: 500;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/deep/.el-input--medium .el-input__inner:hover {
		background-color: #ecedf0;
	}

	/deep/.el-select {
		width: 100%;
	}
.statusradio{
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 20px;
}
</style>
